<template>
    <div class='albumdetail'>
        <img :src="coverurl" alt="">
        <h3>{{albumname}}</h3>
        <p>{{artistname}}</p>
        <button @click="onBack">返回</button>
    </div>
</template>

<script>
import axios from "axios"

export default {    
    data() {        
        return {
            albumname:'',
            artistname:'',
            coverurl:'',
        };
    },
    computed: {},
    watch: {},
    
    methods: {
         async onZhuan(id){
            let result = await axios.post(
                `http://192.168.1.107:3000/album/detail?id=${id}`,
                {
                    withCredentials:true
                });
                this.albumname = result.data.album.albumName;
                this.artistname = result.data.album.artistName;
                this.coverurl = result.data.album.coverUrl;             
        },    
        async onBack(){
            localStorage.removeItem("str");
            this.$router.go(-1);
        },        
    },
    created() {
        const str = JSON.parse(localStorage.getItem('str'));
        const albumId = str.albumId;
        this.onZhuan(albumId);
        

    },
    mounted() {
        
    },
    components: {},
    }
</script>
<style scoped>
    img{
        width: 100%;
    }
    .albumdetail button{
        border: none;
        width: 60px;
        height: 40px;
        background-color: #eee;
        float: right;
    }
</style>